<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>

            <div class="center">
                <h2 style="margin: 0 auto ;width: 150px">修改个人信息</h2>
                <el-form ref="form" :model="form" label-width="150px" style="margin-top: 40px">
                    <el-form-item label="昵称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡绑定">
                        <el-input v-model="form.card_account"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍">
                        <el-input type="textarea" v-model="form.introduction"></el-input>
                    </el-form-item>
                    <el-form-item label="科目">
                        <el-input disabled v-model="form.teacher_type"></el-input>
                    </el-form-item>
                    <el-form-item style="margin: 0 auto;">
                        <el-button style="width: 200px" type="primary" @click="onSubmit">确认修改</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<script>

    import CliTitleStudent from "../../components/base/cliTitleStudent";
    import bloglist from "../../components/list/bloglist";
    import repositorycontextlist from "../../components/list/repositorycontextlist";
    import pageFooter from "../../components/base/pageFooter";
    import Courselist from "../../components/list/courselist";
    import Cookies from "js-cookie";
    import API from "../../api/POST";

    export default {
        name: "homepage",
        components: {Courselist, pageFooter, repositorycontextlist, bloglist, CliTitleStudent},
        data() {
            return {
                tabPosition: 'left',
                activeName: 'first',
                info:'',
                form:{
                    account:'',
                    name:'',
                    introduction: '',
                    card_account: ''
                },
            };
        },
        methods: {
            onSubmit(){
                let data = this.form;
                delete data['teacher_type'];
                API.modify_teacher_information(data).then(res=>{
                    alert('修改成功')
                    this.getData();
                })
            },
            getData(){
                let data = {
                    account : this.form.account
                }
                API.show_user_all_information(data).then(res=>{
                    this.form.name = res.name;
                    this.form.card_account = res.card_account;
                    this.form.introduction = res.introduction;
                    this.form.teacher_type= res.teacher_type;
                })
            }

        },
        mounted() {
            this.info = Cookies.get('info');
            this.info = JSON.parse(this.info);
            console.log(this.info)
            this.form.account = this.info.account;
            this.getData();


        }
    }
</script>

<style scoped>
    .center {
        width: 600px;
        margin: 150px auto;
    }

    .insideTab {
        margin-left: 50px;
    }
</style>
